// SPDX-License-Identifier: GPL-3.0-or-later

import QtQuick
import QtQuick.Layouts
import Fk
import Fk.Components.LunarLTK
import Fk.Pages.LunarLTK
import Fk.Components.Common

GraphicsBox {
  id: root
  property var selectedids: []
  property var ok_options: []
  property var disable_cards: []
  property var cancel_options: []
  property var cards: []
  property int min
  property int max
  property string skill_name: ""
  property string detail_content: ""
  property int result

  title.text: Backend.translate(prompt !== "" ? Util.processPrompt(skill_name) : "$Choice")
  width: 550
  height: title.height + decontent.height + choiceContainer.height + 85

  Component {
    id: cardDelegate
    CardItem {
      scale: 0.8
      Component.onCompleted: {
        setData(modelData);
      }
      autoBack: false
      showDetail: true
      selectable: !disable_cards.includes(cid)
      onSelectedChanged: {
        if (selected) {
          chosenInBox = true;
          root.selectedids.push(cid);
        } else {
          chosenInBox = false;
          root.selectedids.splice(root.selectedids.indexOf(cid), 1);
        }
        root.selectedidsChanged();
      }
    }
  }

  Flickable {
    id: decontent
    x:10
    anchors.top:title.bottom
    anchors.topMargin: 10
    contentHeight: 130
    width: parent.width - 10
    height: detail.height
    clip: true
    Text {
      id: detail
      width: parent.width
      // height: parent.height
      text: Lua.tr(detail_content)
      color: "white"
      lineHeight: 1.2
      // lineHeightMode: Text.Pro
      wrapMode: Text.WordWrap
      font.pixelSize: 18
      textFormat: TextEdit.RichText
    }
  }

  GeneralCardItem {
    anchors.top:decontent.bottom
    anchors.topMargin: choiceContainer.height / 2 - human.height / 2 + 10
    anchors.left:decontent.left
    anchors.leftMargin: 10
    id: human
    name: "caocao"
    visible: name !== ""
  }

  Flickable {
    id: choiceContainer
    // ScrollBar.horizontal: ScrollBar {}

    flickableDirection: Flickable.VerticalFlick
    width: 400
    height: Math.min(cardsList.height,300)
    // anchors.fill: parent
    anchors.top:decontent.bottom
    anchors.topMargin: 5
    anchors.left:human.right
    anchors.leftMargin: 10

    contentWidth: cardsList.width
    contentHeight: cardsList.height + 20
    clip: true

    GridLayout {
      id: cardsList
      columns: 4
      columnSpacing: 0
      rowSpacing: 0
      anchors.top: parent.top
      Repeater {
        id: to_select
        model: cards
        delegate: cardDelegate
      }
    }
  }

  Item {
    id: buttonArea
    anchors.top:choiceContainer.bottom
    anchors.topMargin: 20
    anchors.left:human.right
    anchors.leftMargin: 40
    height: 40

    Row {
      anchors.verticalCenter: parent.verticalCenter
      anchors.bottom: parent.bottom
      spacing: 8

      Repeater {
        model: ok_options

        MetroButton {
          Layout.fillWidth: true
          text: Util.processPrompt(modelData)
          textFont.pixelSize: 20
          enabled: (root.selectedids.length >= root.min && root.selectedids.length <= root.max) || index > 0

          onClicked: {
            const reply = {
                cards: root.selectedids,
                choice: modelData,
              };
            ClientInstance.replyToServer("", reply);
            close();
            roomScene.state = "notactive";
          }
        }
      }

      Repeater {
        model: cancel_options

        MetroButton {
          Layout.fillWidth: true
          text: Util.processPrompt(modelData)
          enabled: true

          onClicked: {
            const reply = {
                cards: [],
                choice: modelData,
              };
            ClientInstance.replyToServer("", reply);
            close();
            roomScene.state = "notactive";
          }
        }
      }
    }
  }

  function loadData(data) {
    // console.log(data)
    skill_name = data[0];
    detail_content = data[1];
    human.name = data[2];
    cards = data[3].map(cid => {
      if (typeof cid === 'object') {
        return cid;
      }
      return Lua.call("GetCardData", cid);
    });
    min = data[4] ?? 1
    max = data[5] ?? 1
    ok_options = data[6] ?? []
    cancel_options = data[7] ?? []
    disable_cards = data[8] ?? []
  }
}
